'use strict';

/**
 * Cesium地球组件，所有Cesium的功能组件都在这里
 * @example
 * <CesiumGlobe
 *    icons={icons}
 *    cesium3DTilesets={cesium3DTilesets}
 *    onLeftClick={this.handleLeftClick}
 *    flyToLocation={flyToLocation}
 *    showShadows={showShadows}
 *    pickObjectEnable={pickObjectEnable}
 *    highlightPickEnable={highlightPickEnable}
 *    homeView={homeView}
 *    cameraPose={cameraPose}
 *    sceneMode={sceneMode}
 *    isMobile={isMobile}
 * />
 */
var CesiumGlobe = React.createClass({
    displayName: 'CesiumGlobe',
    getInitialState: function getInitialState() {
        /**
         * 组件状态
         * @type {object}
         * @property {boolean} viewerLoaded viewer是否加载完成
         */
        return {
            viewerLoaded: false
        };
    },
    componentDidMount: function componentDidMount() {
        this.viewer = new Cesium.Viewer(this.cesiumContainer, {
            // globe:newglobe,
            // skyAtmosphere:skyAtmosphere,
            // terrainProvider:ellipsoidTerrainProvdier,
            animation: false,
            // baseLayerPicker : false,
            // fullscreenButton : false,
            geocoder: false,
            // homeButton : false,
            infoBox: false,
            sceneModePicker: false,
            selectionIndicator: true,
            timeline: false
            // navigationHelpButton : false,
            // scene3DOnly : true,
        });

        // Force immediate re-render now that the Cesium viewer is created
        this.setState({ viewerLoaded: true }); // eslint-disable-line react/no-did-mount-set-state

        /**
         * 下面的参数都是初始化地球的参数
         * 在地球加载完成后立刻执行
         * */
        //设置home键的默认位置
        var camera = this.viewer.camera;
        var homeView = this.props.homeView;
        this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (commandInfo) {
            //Zoom to custom extent
            camera.flyTo(homeView);
            //Tell the home button not to do anything.
            commandInfo.cancel = true;
        });
        //隱藏bottomContainer
        // this.viewer.bottomContainer.style.display = 'none';

        //飞往默认位置
        camera.setView(homeView);
    },

    /**
     * 渲染地球上的对象，包括点线面、图表、文字和三维模型等数据
     * @returns {XML} 各种地理实体对象的组合
     */
    renderContents: function renderContents() {
        var contents = null;

        if (this.state.viewerLoaded) {
            var viewer = this.viewer;
            var scene = viewer.scene;
            var _props = this.props,
                polylines = _props.polylines,
                homeView = _props.homeView,
                isMobile = _props.isMobile,
                sceneMode = _props.sceneMode;

            contents = React.createElement(
                'span',
                null,
                React.createElement(CesiumProjectContents, {
                    scene: scene,
                    polylines: polylines
                }),
                React.createElement(CustomCameraInput, {
                    viewer: viewer,
                    homeView: homeView,
                    isMobile: isMobile,
                    sceneMode: sceneMode
                }),
                React.createElement(
                    'div',
                    { style: isMobile ? { position: 'absolute', bottom: '1rem', left: '1rem', zIndex: '1000' } : { position: 'absolute', top: '5rem', left: '1rem', zIndex: '100' } },
                    React.createElement(Compass, {
                        viewer: viewer,
                        homeView: homeView,
                        sceneMode: sceneMode,
                        compassWidth: 66,
                        ringWidth: 18
                    })
                )
            );
        }

        return contents;
    },
    componentWillUnmount: function componentWillUnmount() {
        if (this.viewer) {
            this.viewer.destroy();
        }
    },
    render: function render() {
        var _this = this;

        var containerStyle = {
            display: 'block',
            position: 'absolute',
            margin: '0',
            padding: '0',
            border: 'none',
            width: '100%',
            height: '100%'
        };

        var contents = this.renderContents();
        return React.createElement(
            'span',
            null,
            React.createElement(
                'div',
                {
                    style: containerStyle,
                    ref: function ref(ele) {
                        _this.cesiumContainer = ele;
                    }
                },
                contents
            )
        );
    }
});